<script type="text/javascript" charset="utf-8" src="__STATIC_JS__/jquery-2.1.3.min.js"> </script>
<link rel="stylesheet" href="__STATIC_JS__croppic/croppic.css">
<script type="text/javascript" charset="utf-8" src="__STATIC_JS__croppic/croppic.js"> </script>

<style>
    #container{
        padding: 0px;
        border-radius:0px;
        border-width:0px;
    }
    #img_preview{
        display: inline;
        float: left;
        margin-top: 40px;
        overflow: hidden;
    }
    .imgdiv{
        display: inline;
        float: left;
        text-align: center;
        border: 1px solid #ccc;
        padding: 5px;
        padding-bottom: 0;
        margin-right: 10px;
    }
    #operate{
    	margin-top: 5px;
    }
    #operate a{
     	cursor:pointer
    }
    #operate a:hover{
    	color: #009688;
    }
    .layui-btn{
    	margin-top: 10px;
    }
</style>
<form class="layui-form seller-alone-form" action="{:url('review/doAdd')}" method="post">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>基础信息</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>房间名称：</label>
        <div class="layui-input-block">
            <input type="text" name="room[name]" required  lay-verify="required" autocomplete="off" placeholder="请输入房间名称，最多可输入200个汉字" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房间编号：</label>
        <div class="layui-input-inline">
            <input type="text" name="room[bn]" lay-verify="title" autocomplete="off" placeholder="请输入房间编号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房间分类：</label>
        <div class="layui-input-inline">
            <select name="room[class_id]">
                <option value="">请选择房间分类...</option>
                {if condition="!empty($roomClass)"}
                {volist name="$roomClass" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
                {/if}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房间排序：</label>
        <div class="layui-input-inline">
            <input type="text" name="room[sort]" lay-verify="title" autocomplete="off" placeholder="越小越靠前" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">国内定位：</label>
        <div class="layui-input-inline">
            <input type="text" name="room[address]" lay-verify="title" autocomplete="off" placeholder="请输入地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">房间简介：</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入房间简介" name="room[brief]" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>房间图片：</label>
        <div class="layui-upload" id="imgs">
            <button type="button" class="layui-btn" id="goods_img" lay-filter="goods_img" onclick="upImage()">上传图片</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                	<p style="color: red;">第一张图片为默认图</p>
                <div class="layui-upload-list" id="img_preview"></div>
            </blockquote>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>销售信息</legend></fieldset>
    <div id="product-info">
        <div class="layui-form-item">
            <label class="layui-form-label">会员价：</label>
            <div class="layui-input-inline">
                <input type="text" name="room[price]" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原价：</label>
            <div class="layui-input-inline">
                <input type="text" name="room[mktprice]" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>






<div id="caotans">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐一</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name1" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price1" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice1" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-1">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(1)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline" >
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐二</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name2" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price2" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice2" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-2">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(2)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline">
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐三</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name3" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price3" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice3" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-3">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(3)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline">
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐四</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name4" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price4" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice4" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-4">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(4)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline" >
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐五</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name5" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price5" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice5" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-5">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(5)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline" >
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐六</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name6" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price6" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice6" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-6">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(6)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline">
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐七</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name7" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price7" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice7" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-7">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(7)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline">
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>套餐八</legend></fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名：</label>
        <div class="layui-input-inline">
            <input type="text" id="name8" placeholder="套餐1" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价：</label>
        <div class="layui-input-inline">
            <input type="text" id="price8" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原价：</label>
        <div class="layui-input-inline">
            <input type="text" id="mktprice8" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-card" style=" border: 1px solid #e9e9e9;" id="tg-8">
        <div class="layui-form-mid layui-word-aux">
            <a href="javascript:void(0);" class="add-type" onclick="addGoods(8)" style="color: red;">点击添加商品</a>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline" >
                <select>
                    <option value="">请选择品牌</option>
                    {if condition="count($goodsList)>0"}
                    {volist name="goodsList" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                    {/if}
                </select>
            </div>
            <label class="layui-form-label">数量：</label>
            <div class="layui-input-inline"><input type="text" placeholder="" autocomplete="off" class="layui-input"></div>
        </div>
    </div>
</div>





    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>房间详情</legend></fieldset>
    {:hook('addgoodsview')}
    <div class="layui-form-item" pane>
        <label class="layui-form-label">推荐：</label>
        <div class="layui-input-block">
            <input type="checkbox" value="1" name="room[is_recommend]" lay-skin="switch" lay-filter="switchTest" title="开关"><div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em></em><i></i></div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text" >
        <label class="layui-form-label">详细介绍：</label>
    </div>
    <div class="layui-form-item" >
        <script id="container" name="room[intro]" type="text/plain" class="layui-textarea"></script>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="open_spec" value="0">
            <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
            <a href="javascript:history.back(-1);" class="layui-btn layui-btn-primary">返回</a>
        </div>
    </div>
</form>

<div id="croppic" style="display: none;"></div>

<script id="image_tpl" type="text/html">
    {{# layui.each(d, function(index, item){  }}
    <div class="imgdiv">
        <img src="{{ item.src }}"  class="layui-upload-img" style="width: 100px;height:100px;">
        <div id="operate">
            <div><a class="del" onclick="delImg(this,'{{ item.image_id }}')">删除</a>|<a class="setmain" onclick="setDefault(this,'{{ item.image_id }}')">设为主图</a>|<a class="croppic" data-id="{{ item.image_id }}" onclick="croppic(this,'{{ item.src }}')">裁剪</a></div>
        </div>
        <input type='hidden' name='room[img][]' value="{{ item.image_id }}">
    </div>
    {{#  }); }}
</script>

<script id="goodsTpl" type="text/html">
    <div class="layui-form-item">
        <label class="layui-form-label">商品：</label>
        <div class="layui-input-inline" >
            <select>
                <option value="">请选择品牌</option>
                {if condition="count($goodsList)>0"}
                {volist name="goodsList" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
                {/if}
            </select>
        </div>
        <label class="layui-form-label">数量：</label>
        <div class="layui-input-inline"><input type="text"  placeholder="" autocomplete="off" class="layui-input"></div>
    </div>
</script>
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

<script type="text/javascript">

    var laytpl='';
    //渲染表单
    layui.use(['form','laytpl','upload'], function(){
        var $ = layui.jquery
                ,upload = layui.upload;
        var form = layui.form;
        laytpl = layui.laytpl;

        form.render();

        //保存商品
        form.on('submit(save)', function(data){
            formData = data.field;
            caocan = [];
            for(let ii = 1; ii <= 8; ii++){
                if($('#name' + ii).val() != ""){
                    let t = {};
                    t.no = ii;
                    t.name = $('#name' + ii).val();
                    t.price = $('#price' + ii).val();
                    t.mktprice = $('#mktprice' + ii).val();
                    doc = $('#tg-' + ii).children();
                    let goods = [];
                    for(let i = 1; i < doc.length; i++){
                        var d = doc[i].getElementsByTagName("select");
                        console.log(doc[i].getElementsByTagName("input"));
                        console.log(d[0].value);
                        if(d[0].value != ""){
                            let g = {};
                            g.id = d[0].value;
                            g.total = doc[i].getElementsByTagName("input")[1].value;
                            g.name = doc[i].getElementsByTagName("input")[0].value;
                            goods.push(g);
                        }
                    }
                    t.goods = goods;
                    caocan.push(t);
                }
            }
            console.log(caocan);
            if(caocan.length > 0){
                formData['taocan'] = JSON.stringify(caocan);
            }
           /* if(!formData){
                layer.msg('请先完善数据', {time: 1300});
                return false;
            }*/
            $.ajax({
                url: '{:url("review/doAdd")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function(e){
                    if(e.status === true){
                       layer.msg(e.msg, {time: 1300}, function(){
                            window.location.href='{:url("review/index")}';
                        });
                    }else{
                        layer.msg(e.msg, {time: 1300});
                    }
                }
            })
            return false;
        });
    });



    var _editor = UE.getEditor("edit_image",{
        initialFrameWidth:800,
        initialFrameHeight:300,
    });
    _editor.ready(function (){
        _editor.hide();
        _editor.addListener('beforeInsertImage',function(t,arg){
            if(arg.length>5){
                layer.msg("最多只能选择5张图片，请重新选择");
                return false;
            }
            var getTpl = image_tpl.innerHTML
                ,view = document.getElementById('img_preview');
            var oldHtml = $("#img_preview").html();
            if(arg.length>0) {
                laytpl(getTpl).render(arg, function (html) {
                    view.innerHTML = oldHtml+html;
                });
            }else{
                layer.msg("请先上传图片");
                return false;
            }
        });
    });
    //上传dialog
    function upImage(){
        var myImage = _editor.getDialog("insertimage");
        myImage.open();
    }
    /**
     * 删除图片
     * @param obj
     * @param imageId
     */
    function delImg(obj,imageId) {
        var imgDiv = $(obj).parent().parent().parent();
        imgDiv.remove();
    }
    /**
     * 设为默认图
     * @param obj
     * @param imageId
     */
    function setDefault(obj,imageId) {
        var imgDiv = $(obj).parent().parent().parent();
        $("#img_preview").prepend(imgDiv);
    }

    function croppic(obj, image_src) {
        var image = $(obj).parent().parent().parent();
        var croppicContainerModalOptions = {
            cropUrl: "{:url('images/cropper')}",
            loadPicture: image_src,
            modal: true,
            cropZoomWidth: 300,
            cropZoomHeight: 300,
            imgEyecandyOpacity: 0.4,
            loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onAfterImgCrop: function (res) {
                if (res.status=='success') {
                    image.replaceWith(res.image_html);
                    layer.msg("裁剪成功");
                } else {
                    layer.msg(res.msg);
                }
                return true;
            },
            onError: function (errormessage) {
                layer.msg('onError:' + errormessage);
            }
        };
        var cropContainerModal = new Croppic('croppic', croppicContainerModalOptions);
    }


function addGoods(taocan) {
    var html = $('#goodsTpl').html();
    $('#tg-' + taocan).append(html);
    layui.form.render();
    }
</script>
<textarea id="edit_image" style="display: none;"></textarea>
